<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- css -->
    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<style>
    html,body{
        width:100%;
        height:100%;
        background: #f7f7f7;

        margin:0px;
    }
    #main{
        width:100%;
        height:100%;
        /* background:red;*/
        display:flex;
        flex-wrap: wrap;
        flex-direction:row;
        justify-content: start;
    }
    .nav{
        background: #ccc;
        color: #fff;
        font-size: 25px;
    }
    .top-head{
        width: 100%;
        height: 10%;
        /* background: orange;*/
        display:flex;
        flex-wrap: no-wrap;
        justify-content:center;
    }
    .left-menu{
        width:12%;
        height: 90%;
        /*background:yellow;*/
    }
    .right-content{
        width: 88%;
        height:90%;
        /*   background:blue;*/
    }
    #logo{
        width:10%;
        height:100%;
        line-height:80px;
        /*background:purple;*/
    }
    #title{
        width:50%;
        font-size: 28px;
        text-align:center;
        line-height: 80px;
        /*background:#eee;*/
    }
    #per-mes{
        width:20%;
        height:100%;
        line-height: 80px;
        /*background:green;*/
    }
    li{
        list-style:none;
    }

    a{
        text-decoration: none;
    }
    a:focus, a:hover {
        color: #23527c;
        text-decoration: none;
    }
    li:hover{
        list-style:none;
    }

</style>
<body>
<div id="main">
    <div class="top-head">
        <div id="logo">logo</div>
        <div id="title">xxx后台管理系统</div>
        <div id="per-mes">您好，admin。欢迎您使用后台管理系统！ </div>
    </div>
    <div class="left-menu">
        <!-- 侧边栏标签页 -->
        <ul class="nav nav-stacked">
            <!-- 侧边栏选项 -->
            <li role="presentation" class="active">
                <!-- 选项控制data-target对应的显隐 -->
                <a href="#" data-toggle="collapse" data-target="#list">商品管理</a>
                <!-- 隐藏的详细菜单 -->
                <ul id="list" class="collapse in">
                    <li class="active">
                        <a href="">
                            操作一
                        </a>
                    </li>
                    <li><a href="">操作二</a></li>
                </ul>
            </li>
            <li role="presentation"><a href="#" data-toggle="collapse" data-target="#list1">Profile</a>
                <ul id="list1" class="collapse in">
                    <li class="active">
                        <a href="">
                            操作一
                        </a>
                    </li>
                    <li><a href="">操作二</a></li>
                </ul>
            </li>
            <li role="presentation"><a href="#">Messages</a></li>
        </ul>
    </div>
    <div class="right-content">

        <div style="margin:10px;">
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active">Data</li>
            </ol>
            这里是内容
        </div>
    </div>
</div>
</body>

</html>
